<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8">
            <el-card shadow="hover">
                <div class="user" >
                    <img :src="getImageUrl()" alt="" srcset="" class="user-img">
                    <div class="user-info">
                        <h2>Admin</h2>
                        <p>超级管理员</p>
                    </div>
                </div>
                <template class="login-info" #footer>
                    <p>上次登录时间：<span>2024-01-01 12:00:00</span></p>
                    <p>上次登录地点：<span>北京</span></p>
                </template>
            </el-card>

            <el-card shadow="hover" style="margin-top: 20px;">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column 
                        v-for="(item, key) in tableLabel"
                        :key="key"
                        :label="item"
                        :prop="key"
                    />
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card shadow="hover" class="echarts-top">
                <div ref="echartsTop" style=" height: 400px;"></div>
            </el-card>
        </el-col>
  </el-row>

</template>

<script setup >
import { onMounted, ref } from 'vue';
import service from '@/api/request'
import * as echarts from 'echarts'

const getImageUrl = () => {
    const imageUrl = new URL('src/assets/images/R-C.jpg', window.location.href);
    return imageUrl.href;
}
const tableData = ref()
const tableLabel = ref()
const echartsData = ref()
const echartsTop = ref()
let chartInstance = null

const getTableData = async () => {
    const res = await service.get('/api/home/getTableData')
    if(res.data.code === 200) {
        tableData.value = res.data.data.tableData
        tableLabel.value = res.data.data.tableLabel
    }
}
const getEchartsData = async () => {
    const res = await service.get('/api/home/getEchartsData')
    
    console.log(res.data)
    if(res.data.code === 200) {
        echartsData.value = res.data.data.videoData
    }

    chartInstance  = echarts.init(echartsTop.value)
    const option = {
        xAxis: {
            type: 'category',
            data: echartsData.value.map(item => item.name)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: echartsData.value.map(item => item.value),
            type: 'line'
            }
        ]
    };
    chartInstance.setOption(option);
}

onMounted(() => {
    getTableData()
    getEchartsData()
})

</script>

<style lang="less" scoped>
.home {
    padding: 20px;
    height: 100vh;
    overflow: hidden;
    .user {
        display: flex;
        align-items: center;

        .user-img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
        }
        .user-info {
            margin-left: 40px;
            h2 {
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            p {
                font-size: 14px;
                color: #999;
            }
        }
    }
    .login-info {
        margin-top: 20px;
        p {
            font-size: 14px;
            color: #999;
        }
        span {
            color: #333;
            font-weight: bold;
        }
    }
}
</style>